<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极</title>
	<style>
		.circle {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 400px;
			height: 400px;
			margin: auto;
			box-sizing: border-box;
			border-radius: 50%;
			border:1px solid #f00;
			border-bottom:200px solid #f00;
			transform-origin: 50% 50%;
			animation-name: rotate;
			animation-duration: 5s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform:rotate(360deg);
			}
		}
		.circle:after {
			content: "";
			position: absolute;
			top: 100px;
			left: 0;
			width: 50px;
			height: 50px;
			background-color: red;
			border:79px solid #fff;
			border-radius: 50%;
		}
		.circle:before {
			content: "";
			position: absolute;
			top: 100px;
			right: 0;
			width: 50px;
			height: 50px;
			background-color: #fff;
			border:79px solid #f00;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="circle">
		
	</div>
</body>
</html>